<script setup name="XiaoheTree">
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'

const emit = defineEmits(['treeChange', 'cancel'])
const defaultProps = {
  children: 'children',
  label: 'label'
}

const treeRef = ref(null)
// 数据
const data = []
const change = tree => {
  // console.log(tree)
  emit('treeChange', tree)
}

// 查询树状
const treeSelect = () => {}
</script>
<template>
  <div class="app-container">
    <div class="flex">
      <el-input v-model="input2" class="inputClass" placeholder="" :prefix-icon="Search" />
      <el-button type="primary" @select="treeSelect">查询</el-button>
    </div>
    <el-tree
      ref="treeRef"
      :data="data"
      show-checkbox
      default-expand-all
      node-key="id"
      highlight-current
      :props="defaultProps"
      @current-change="change"
    />
    <div class="Btn">
      <el-button type="primary" @select="treeSelect">保存</el-button>
      <el-button type="primary" @click="emit('cancel')">取消</el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.flex {
  display: flex;
  justify-content: center;
  align-content: center;
}
.inputClass {
  width: 200px;
  margin-right: 20px;
  margin-bottom: 20px;
}
.Btn {
  float: right;
}
</style>
